// 图片裁剪区域
const cropper = new Cropper(document.getElementById('avatar_big_img'), {
    aspectRatio: 1, // 长宽比例：1:1代表正方形
    crop: _.throttle(function() {
        let img_100 = cropper.getCroppedCanvas({
            width: 100,
            height: 100,
        })
        $('#preview_img_100').html(img_100)
        let img_50 = cropper.getCroppedCanvas({
            width: 100,
            height: 100,
        })
        $('#preview_img_50').html(img_50)
    }, 150)

})

// 当用户点了选择头像按钮，用js去模拟点击input框
$('#select_img').on('click', function() {
    $('#input_file').click()
})

// 绑定input的change事件
$('#input_file').on('change', function(e) {
    let img_url = URL.createObjectURL(this.files[0])
    cropper.replace(img_url)
})

// 当用户点击确定，就把裁剪的头像发送给服务器存起来
$('#submit').on('click', function() {
    let img_100 = cropper.getCroppedCanvas({
        width: 100,
        height: 100,
    })

    // 把canvas图片转换成base64
    let img_base64 = img_100.toDataURL('image/jpeg')
    encodeURIComponent(img_base64)
    axios({
        method: 'post',
        url: '/my/update/avatar',
        data: `avatar=${encodeURIComponent(img_base64)}`
    }).then(res => {
        if (res.data.status === 0) {
            // 如果头像更换成功，就调用父页面的getUserInfo()
            window.parent.getUserInfo()
        }
    })
})